<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    @cancel="handleCancel">
    
    <a-card :bordered="false">
      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :scroll="{
        x: 1200
      }"
        :showPagination="false"
        :rowKey="(record) => record.code"
      >
       <span slot="materialModelNumber" slot-scope="text, record">
          {{ record.material ? record.material.materialModelNumber : '' }}
        </span>
      </s-table>
    
    </a-card>
  </a-modal>
</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";

import {STable} from '@/components'
import {page} from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage.js'


@Component({
  components: {
    STable,
  }
})
export default class DeliveryWarehouseRecordModal extends Vue {
  @Ref() readonly table!: any
  
  visible = false
  title = '出库及退库记录'
  confirmLoading = false
  // 查询参数
  queryParam = {
    sourceOrderId: '',
    materialId: '',
    materialType: '',
    parentNumber: '',
    pageSize: undefined,
  }
  columns = [
    {
      title: '序号', width: '80px',
      customRender: (text, record, index) => `${index + 1}`
    },
    {
      align: 'center',
      title: '单号',
      dataIndex: 'orderNumber'
    },
    {
      align: 'center',
      title: '物料编码',
      dataIndex: 'materialCode'
    },
    
    {
      align: 'center',
      title: '物料',
      dataIndex: 'materialName'
    }, {
      align: 'center',
      title: '规格',
      dataIndex: 'materialModelNumber',
      scopedSlots: {customRender: 'materialModelNumber'}
    }, {
      align: 'center',
      title: '本次出库数量',
      customRender(text: any, record: any,) {
        return `${record.number + record.extraNumber}`
      }
    },
    {
      align: 'center',
      title: '已退库数量',
      dataIndex: '',
      customRender(text: any, record: any,) {
        return `${record.returnStockNumber + record.extraReturnStockNumber}`
      }
    }, {
      align: 'center',
      title: '待确认退库数量',
      customRender(text: any, record: any,) {
        return `${record.returnNumber + record.extraReturnNumber}`
      }
    }, {
      align: 'center',
      title: '实际出库数量',
      customRender(text: any, record: any,) {
        return record.completedNumber
      }
    }, {
      title: '成本价',
      dataIndex: 'costPrice',
    },
    {
      title: '小计',
      customRender(text: any, record: any,) {
        return (+record.completedNumber * +record.costPrice).toFixed(2)
      }
    }
  ]
  
  emsOrder = {}
  
  
  loadData(parameter: { pageNo: number, pageSize: number }) {
    const params = {
      ...parameter,
      ...this.queryParam
    }
    return page(params).then((res) => {
      return res.data
    })
  }
  
  
  show(record,) {
    console.log('111', record)
    this.visible = true
    this.emsOrder = record
    this.queryParam.sourceOrderId = record.orderId
    this.queryParam.materialId = record.materialId
    this.queryParam.materialType = record.materialType
    this.queryParam.parentNumber = record.scOrderNumber
    this.queryParam.pageSize = -1
    
    setTimeout(() => {
      this.handleOk()
    }, 100)
  }
  
  
  handleOk() {
    this.table.refresh()
  }
  
  
  handleCancel() {
    this.visible = false
  }
  
  
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>
